<template>
  <div class="home">
    <el-container style="background-color: #ffffff;">
      <el-aside style="" :width="isCollapse ? '64px' : '200px'">
        <el-menu
          :default-active="sideMenuSelected"
          class="menu"
          background-color="#304156"
          text-color="#fff"
          :collapse-transition="false"
          active-text-color="#ffd04b"
          @select="activationMenu"
          :collapse="isCollapse">
          <!--图标-->
          <div  class="iconTitle">
            <svg class="icon" aria-hidden="true"  style="width: 1.5em;height: 1.5em;">
              <use xlink:href="#icon-taozi"></use>
            </svg>
            <transition
              enter-active-class="animate__animated animate__fadeIn "
              leave-active-class="animate__animated animate__fadeOut ">
              <span style="font-size: 23px; transition:width 280ms;;margin-left:10px;font-weight: 600;" v-show="!isCollapse">
                TAO
              </span>
            </transition>
          </div>
          <!--菜单-->
          <template v-for="(item,index)  in this.$store.getters.sideMenuList" :key="index">
            <!--一级菜单无子菜单-->
            <template v-if="item.children.length === 0">
              <el-menu-item  :index="item.path">
                <Icon :name="item.icon"></Icon>
                <template #title>
                  {{item.name}}
                </template>
              </el-menu-item>
            </template>
            <!--一级菜单有子菜单-->
            <el-sub-menu  v-else :index="index.toString()" >
              <template #title>
                <Icon :name="item.icon"></Icon>
                <span >{{item.name}}</span>
              </template>
              <!--遍历子菜单-->
              <el-menu-item-group>
                <div v-for="(items,indexs)  in item.children" :key="indexs.toString()">
                  <el-menu-item :index="items.path" style="min-width:170px !important;">
                    <Icon :name="items.icon"></Icon>
                    <template #title>
                      {{items.name}}
                    </template>
                  </el-menu-item>
                </div>
              </el-menu-item-group>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-aside>
      <el-container >
        <el-main class="main">
          <el-scrollbar >
            <el-row class="top">
              <el-row class="topMenu">
                <el-col :span="22">
                  <el-menu
                    :default-active="$store.getters.sideMenuActivation.toString()"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect">
                    <icon :name="! isCollapse ? 'Fold' : 'Expand'" :size="20" @click="isCollapse = ! isCollapse" style="cursor:pointer"></icon>
                    <div v-for="(item,index)  in this.$store.getters.menuList" :key="index">
                      <el-menu-item :index="index.toString()">
                        <Icon :name="item.icon"></Icon>{{item.name}}</el-menu-item>
                    </div>
                  </el-menu>
                </el-col>
                <!--头像区域-->
                <el-col :span="2">
                 <el-row>
                   <el-col :span="12" >
                     <icon name="FullScreen"  :size="30" color="#666666" style="transform: translateY(50%);"/>
                   </el-col>
                   <el-col :span="12">
                     <el-dropdown @command="handleCommand" >
                       <el-avatar :size="51" :src="this.$store.getters.user.avatar"/>
                       <template #dropdown>
                         <el-dropdown-menu>
                           <el-dropdown-item command="1">个人中心</el-dropdown-item>
                           <el-dropdown-item command="2">我的消息</el-dropdown-item>
                           <el-dropdown-item command="3">退出系统</el-dropdown-item>
                         </el-dropdown-menu>
                       </template>
                     </el-dropdown>
                   </el-col>
                 </el-row>

                </el-col>
              </el-row>
              <!--导航条-->
              <el-row class="topCrumbs">
                <el-scrollbar>
                <span v-for="(item,index) in this.$store.getters.navigationBar" :key="index.toString()" >
                  <!--现在的导航条样式，使用了tag标签-->
                 <el-check-tag
                   @click="navigationBarClick(item)"
                   style="margin-left: 2px;margin-top: 3px" type="danger"
                   :checked="sideMenuSelected === item.path" closable >
                     {{item.title}}
                      <icon name="Close" :size="10"  @click.stop="removeNavigation(item,index)"  v-if="sideMenuSelected !== item.path"></icon>
                      <icon name="Apple" :size="10" v-if="sideMenuSelected === item.path"></icon>
                 </el-check-tag>
                </span>
                </el-scrollbar>
              </el-row>
            </el-row>
            <el-row style="padding: 10px;background-color: #ffffff;font-size: 14px">
              <transition
                enter-active-class="animate__animated animate__fadeIn "
                leave-active-class="animate__animated animate__fadeOut ">
                <router-view></router-view>
              </transition>
            </el-row>
          </el-scrollbar>
        </el-main>
        <el-footer height="30px">
          <div style="text-align: center;height: 20px">
            <span>
              <span style="line-height: 20px;font-family: 华文楷体;letter-spacing: 2px;font-size: 16px;font-weight: 600;color: #999999">
                 TAO 快速开发平台
              </span>
              <span style="font-size: 10px;color: rgb(64, 158, 255);margin-left: 20px;" class="my-face">
                 ღゝ◡╹)ノ♡ 远方的人，祝你开心每一天
                <svg class="icon" aria-hidden="true" style="width: 2em;height: 2em">
                   <use xlink:href="#icon-a-97"></use>
                </svg>
              </span>
            </span>
          </div>
        </el-footer>
      </el-container>

    </el-container>
  </div>

</template>

<script>
import Icon from '@/components/Icon'
import {
  MENU,
  NAVIGATION_BAR,
  SIDE_MENU,
  SIDE_MENU_ACTIVATION,
  SIDE_MENU_SELECTED,
  TOKEN
} from '@/store/methodConstant'
export default {
  name: 'Index',
  components:{
    Icon
  },
  data () {
    return {
      isCollapse:false,
      sideMenuSelected: '1',
    }
  },

  mounted () {
    //初始状态下导航条选中的为最大
    //this.sideMenuSelected = this.$store.getters.navigationBar[this.$store.getters.navigationBar.length -1].path
    this.sideMenuSelected = this.$route.path
    //侧边栏默认初始化，使用vuex中存储的值
    this.handleSelect(this.$store.getters.sideMenuActivation)
    console.log(this.$store.getters.sideMenuActivation)
  },
  methods:{
    //激活侧边栏菜单
    activationMenu(index){
      //是否为站外连接
      if (index.includes('http') || index.includes('www')){
        window.open(index)
      }else {
        this.sideMenuSelected = index
        this.$router.push(index)
      }
    },
    //top菜单点击
    handleSelect(key, keyPath) {
      console.log( this.$store.getters.menuList)
      let menuListElement = this.$store.getters.menuList[parseInt(key)]
      console.log(menuListElement)
      this.$store.commit(SIDE_MENU,menuListElement.children)
      this.$store.commit(SIDE_MENU_ACTIVATION,key)
    },
    //头像下拉框点击
    handleCommand(command) {
      if (command === '1'){
        this.$notify({
          title: '提示',
          offset: 150,
          message: '个人中心页面UI正在设计中',
          type: 'success',
        })
      }else if (command === '2') {
        this.$notify({
          title: '提示',
          offset: 150,
          message: '消息模块正在设计中',
          type: 'success',
        })
      }else {
        this.$router.push('/login')
        this.$store.commit(TOKEN,null)
        this.$store.commit(MENU,[])
        this.$store.commit(SIDE_MENU_ACTIVATION,'0')
        this.$store.commit(SIDE_MENU_SELECTED,'0')
        this.$store.commit(NAVIGATION_BAR,[])
      }
    },
    //导航条点击
    navigationBarClick(item){
      this.$router.push(item.path)
      this.sideMenuSelected = item.path
      //当前全部菜单
      let menu = this.$store.getters.menuList
      //当前导航条对应的顶部菜单
      let index = menu.findIndex(data => {
        let findIndex = data.children.findIndex(datas => datas.path === item.path)
        return findIndex >= 0;
      })
      //设置当前激活的顶部菜单
      this.$store.commit(SIDE_MENU_ACTIVATION,index)
      console.log(item)
    },
    //删除导航条数据
    removeNavigation(item,index){
      let navigationBar = this.$store.getters.navigationBar
      //如果导航条只剩下一个数据或者移除的数据为当前数据，则不可移除
      if (navigationBar.length === 1 || this.sideMenuSelected === parseInt(item)){
        return
      }
      //移除指定的导航条数据
      navigationBar.splice(index,1)
      //如果移除的数据索引小于当前值
      if (index < this.sideMenuSelected){
        this.sideMenuSelected = this.sideMenuSelected - 1
      }
    },

  }
}
</script>

<style scoped>
@import "../assets/css/foo.css";
.home {
  height: 100vh;
}
.el-aside {
  transition:width 280ms;
  background-color:#304156;
  overflow: revert;
}
.iconTitle {
  color: #ffffff;
  padding-top:8px;
  padding-bottom:8px;
  align-content: center;
  text-align: center
}
.menu{
  min-height: 100vh;
  height: 100vh;
  border: #304156;
  transition:width 280ms;
}
.el-container {
  height: 100%;
  transition: margin-left 280ms;
}
.main {
  padding: 0px !important;
  height: 100%;
}
.topMenu {
  box-shadow: rgb(235 238 245) 0px 1px 2px;
  border-bottom: 1px solid rgb(230, 230, 230);
  height: 57px;
  width: 100%;
}
.topCrumbs {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  height: 34px;
}
.crumbs {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 5px;
  margin-top: 3px;
}
.top {
  position: relative;
  font-size: 12px;
  box-shadow: rgb(235 238 245) 0px 3px 2px;
  border-bottom: 3px solid rgb(235, 238, 245);
  width: 100%;
}

</style>
